<template>
  <div class="header">
    <div class="scan-code">
      <slot name="scan-code"></slot>
    </div>
    <div class="search">
      <slot name="search"></slot>
    </div>
    <div class="login">
      <slot name="login"></slot>
    </div>
  </div>
</template>

<script>

export default {
  name: "NavBar",
  methods: {

  }
}
</script>

<style scoped>
  .active{
    color: red;
  }
  .header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.31rem;
    background-color: white;
    border-bottom: 1px #f1f1f1 solid;
  }
  .header div{
    display: inline-block;
    float: left;
    text-align: center;
    height: 1.31rem;
  }
  .header .scan-code{
    width: 15%;
    height: 1.31rem;
  }
  .header .scan-code i{
    font-size: 0.8rem;
    color: #AAAAAA;
    float: right;
    margin-top: 0.3rem;
  }
  .header .search{
    width: 70%;
    height: 1.31rem;
  }
  .header .search input{
    display: block;
    width: 90%;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.5rem;
    margin: 0.13rem auto 0;
    border-radius: 30px;
    background:#f1f1f1;
    outline:none;
    text-align: center;
    border: none;
  }
  .header .login{
    width: 15%;
    height: 1.31rem;
  }
  .header .login i{
    font-size: 0.9rem;
    float: left;
    /*color: #AAAAAA;*/
    margin-top: 0.2rem;
  }
</style>